<template>
    <view>
        <!-- pages/category/category.wxml -->
        <view class="search" @tap="goToSearchPage"><search></search></view>
        <view class="whole-scroll-box">
            <view class="scroll-box-left">
                <scroll-view class="categories-scroll" :scroll-y="true">
                    <view class="category-item" :data-cat_id="item.cat_id" @tap="onCategoryTap" v-for="(item, index) in categoriesList" :key="index">
                        <text class="category-name" :style="'color: ' + (item.cat_id === selectedCategoryId ? 'red' : 'black') + ';'">{{ item.cat_name }}</text>
                    </view>
                </scroll-view>
            </view>
            <view class="scroll-box-right">
                <scroll-view class="content-scroll" :scroll-y="true" :scroll-x="true">
                    <block class="product-item" v-for="(item, index) in selectedCategoryProducts" :key="index">
                        <view class="product-bigbox" :data-cid="item.cat_id" @tap="onProductTap">
                            <view class="product-box">
                                <image class="product-image" :src="item.cat_icon" mode="aspectFit"></image>
                                <text class="product-name">{{ item.cat_name }}</text>
                            </view>
                        </view>
                    </block>
                </scroll-view>
            </view>
        </view>
    </view>
</template>

<script>
import search from '../../Comp/search/search';
// pages/category/category.js
export default {
    components: {
        search
    },
    data() {
        return {
            categoriesList: [],
            selectedCategoryProducts: [],
            selectedCategoryId: null
        };
    },
    onLoad: function () {
        this.getCategoiesData();
    },
    methods: {
        onProductTap: function (event) {
            const cid = event.currentTarget.dataset.cid;
            console.log('onProductTap cid:', cid);
            uni.navigateTo({
                url: `/pages/goodlist/goodlist?cid=${cid}`
            });
        },

        getCategoiesData: function () {
            var that = this;
            uni.request({
                url: 'https://api-hmugo-web.itheima.net/api/public/v1/categories',
                method: 'GET',
                success: function (res) {
                    if (res.data.meta.status === 200) {
                        that.setData(
                            {
                                categoriesList: res.data.message
                            },
                            function () {
                                if (that.categoriesList.length > 0) {
                                    const firstCategoryId = that.categoriesList[0].cat_id;
                                    that.onCategoryTap({
                                        currentTarget: {
                                            dataset: {
                                                cat_id: firstCategoryId
                                            }
                                        }
                                    });
                                }
                            }
                        );
                    }
                }
            });
        },

        onCategoryTap: function (e) {
            const cat_id = e.currentTarget.dataset.cat_id;
            const categories = this.categoriesList;
            const products = this.getCategoryProducts(categories, cat_id);
            this.setData({
                selectedCategoryProducts: products,
                selectedCategoryId: cat_id
            });
        },

        getCategoryProducts: function (categories, cat_id) {
            let products = [];
            function findProducts(categoryList, id) {
                categoryList.forEach((category) => {
                    if (category.cat_id === id) {
                        if (category.children && category.children.length > 0) {
                            findProducts(category.children, id);
                        }
                    }
                    if (category.cat_pid === id) {
                        products.push({
                            cat_id: category.cat_id,
                            cat_name: category.cat_name,
                            cat_icon: category.cat_icon
                        });
                        if (category.children && category.children.length > 0) {
                            findProducts(category.children, category.cat_id);
                        }
                    }
                });
            }
            findProducts(categories, cat_id);
            return products;
        },

        goToSearchPage: function () {
            uni.navigateTo({
                url: '/pages/search/search'
            });
        }
    }
};
</script>
<style>
/* pages/category/category.wxss */
.search {
    background-color: #ff3333;
    padding: 0;
    margin: 0;
    padding-bottom: 15rpx;
}
.whole-scroll-box {
    position: relative;
    width: 100%;
    display: flex;
}
.categories-scroll {
    position: fixed;
    width: 25%;
    height: 100%;
    overflow-y: scroll;
}
.category-item {
    height: 100rpx;
    line-height: 100rpx;
    text-align: center;
    border: rgb(241, 238, 238) 1rpx solid;
}
.category-name {
    font-size: 40rpx;
}
.content-scroll {
    position: fixed;
    right: 0;
    width: 75%;
    height: 100%;
    overflow: scroll;
}
.product-item {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    white-space: nowrap;
    overflow: visible;
    width: 75%;
    margin-top: 20rpx;
    padding: 0;
}
.product-bigbox {
    display: inline-block;
    margin: 15rpx;
}
.product-bigbox:first-child {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40rpx;
    width: 100%;
    height: 90rpx;
}
.product-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 155rpx;
    height: 155rpx;
}
</style>
